<template>
    <div class="xunjingwendao">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">
            <!-- 收货地址 -->
            <div class="addr">

                <div class="right">
                    <div class="tel-name">

                        <div class="name">
                            购买账户：{{ user.phone }}
                        </div>

                    </div>

                </div>



            </div>
            <!-- 购买商品列表 -->
            <div class="buy-list">
                <div class="row" v-for="(row, index) in buylist" :key="index">
                    <div class="goods-info">
                        <div class="img">
                            <img style="width: 100%;height: 100%;" :src="row.courseImgUrl" />
                        </div>
                        <div class="info">
                            <div class="order-title">{{ row.name }}</div>
                            <!-- <div class="order-title">{{row.descs}}</div> -->

                            <div class="price-number">
                                <div class="price">￥{{ row.price }}</div>

                                <div class="number">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 提示-备注 -->
            <div class="order">

                <div class="row">
                    <div class="order_left">
                        备注 :
                    </div>
                    <div class="order_right">
                        <el-input placeholder="选填,备注内容" v-model="note"></el-input>
                    </div>
                </div>
            </div>
            <div class="order" v-if="buylist.length > 1 && dazhe < 1">

                <div class="row">
                    <div class="order_left">
                        温馨提示 :
                    </div>
                    <div class="order_right">
                        <text>本单打{{ dazhe * 10 }}折 价格以实际支付为准</text>
                    </div>
                </div>
            </div>
            <!-- 明细 -->
            <div class="detail">
                <div class="row">
                    <div class="nominal">
                        商品金额
                    </div>
                    <div class="content">
                        ￥{{ price | toFixed }}
                    </div>
                </div>


            </div>
            <div class="blck">

            </div>
            <div class="order_footer">
                <div class="settlement">
                    <div class="sum">实付款:<div class="money">￥{{ price | toFixed }}</div>
                    </div>
                    <div class="btn" @click="toPay">提交订单</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { dazhelv } from "@/api/index"
export default {
    computed: {
        currentPath() {
            return '/lesson'; // 获取当前路由路径
        },
    },
    data() {
        return {
            buylist: [],		//订单列表
            dazhe: 0,
            sumPrice: 0.0,	//用户付款价格
            freight: 0.00,	//运费
            note: '',		//备注
            int: 1200,		//抵扣积分
            deduction: 0,	//抵扣价格
            recinfo: null,
            user: {},
            price: 0

        };
    },


    mounted() {
        this.user = localStorage.getItem('userInfo');
        let arr = []

        if (this.$route.query.type == 'order') {
            let data = JSON.parse(this.$route.query.dataObj)
            console.log(data)
            this.price = data.price;
            arr.push(data)
            this.buylist = arr;
            console.log(arr)
        } else if (this.$route.query.type == 'cart') {
            let data = JSON.parse(this.$route.query.goodsData)
            let newData = []
            data.forEach((v) => {
                newData.push({
                    name: v.spuName,

                    courseImgUrl: v.picUrl,
                    price: v.addPrice,
                    spuId: v.spuId,
                })
            })

            this.buylist = newData;
            this.price = this.$route.query.sumPrice;
        }


        this.dazhelvData()

    },

    filters: {
        toFixed: function (x) {
            return parseFloat(x).toFixed(2);
        }
    },
    methods: {

        dazhelvData() {
            dazhelv({}).then((res) => {
                console.log(res.data)
                this.dazhe = res.data;

            })
        },

        toPay() {
            this.$router.push({
                path: '/payMoney',
                query: {
                    orderData: JSON.stringify(this.buylist),
                    userMessage: this.note,
                    goodsPrice: this.price,
                    type: 'normal'
                }
            })

        },

    }
}
</script>

<style lang="scss">
.addr {
    width: 86%;
    padding: 20px 3%;
    margin: 30px auto 20px auto;
    border: 1px solid #f5f5f5;
    border-radius: 20px;
    display: flex;

    .icon {
        width: 80px;
        height: 80px;


    }

    .tel-name {
        width: 100%;
        display: flex;
        font-size: 16px;

        .tel {
            margin-left: 40px;
        }
    }

    .addres {
        width: 100%;
        font-size: 14px;
        color: #999;
    }
}

.buy-list {
    width: 86%;
    padding: 10px 3%;
    margin: 30px auto 20px auto;
    border: 1px solid #f5f5f5;
    border-radius: 20px;

    .row {
        margin: 30px 0;

        .goods-info {
            width: 100%;
            display: flex;

            .img {
                width: 210px;
                height: 120px;
                border-radius: 10px;
                overflow: hidden;
                flex-shrink: 0;
                margin-right: 10px;


            }

            .info {
                width: 100%;


                .order-title {
                    width: 100%;
                    font-size: 16px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    // text-align: justify;
                    overflow: hidden;
                }

                .spec {
                    font-size: 14px;
                    background-color: #f3f3f3;
                    color: #a7a7a7;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    padding: 0 10px;
                    border-radius: 20px;
                    margin-bottom: 20vw;
                }

                .price-number {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    font-size: 16px;
                    height: 40px;

                    .price {
                        color: #f06c7a;
                    }

                    .number {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                    }
                }
            }
        }
    }
}

.order {
    width: 86%;
    padding: 10px 3%;
    margin: 30px auto 20px auto;
    border: 1px solid #f5f5f5;
    border-radius: 20px;

    .row {
        margin: 20px 0;
        height: 40px;
        display: flex;
        align-items: center;

        .order_left {
            font-size: 16px;
        }

        .order_right {
            margin-left: 40px;
            font-size: 16px;
            color: #999;

            input {
                font-size: 26px;
                color: #999;
            }
        }
    }
}

.blck {
    width: 100%;
    height: 100px;
}

.order_footer {
    width: 92%;


    height: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 16px;


    z-index: 5;

    .settlement {
        width: 80%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .sum {
            width: 50%;
            font-size: 16px;
            margin-right: 10px;
            display: flex;
            justify-content: flex-end;
            color: #ff5000;

            .money {
                font-weight: 600;
            }
        }

        .btn {

            height: 40px;
            width: 90px;
            background-color: #ff5000;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            border-radius: 10px;
        }
    }
}

.detail {
    width: 86%;
    padding: 10px 3%;
    margin: 30px auto 20px auto;
    border: 1px solid #f5f5f5;
    border-radius: 20px;

    .row {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nominal {
            font-size: 16px;
        }

        .content {
            font-size: 16px;
            color: #f06c7a;
        }
    }
}
</style>
